<template>
  <view class="banner-box">
    <!-- 背景色 -->
    <view class="banner-bg" :style="{'background-image':`linear-gradient(${bannerBackground || '#345DC2'} 50%,#FFF)`}"></view>
    <!-- 轮播图 -->
    <swiper class="banner-swiper"
    circular
    :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" 
    indicator-active-color="#FFFFFF" indicator-color="rgba(255,255,255,0.5)"
    :current="current" @change="swiperChange"
    >
      <swiper-item class="swiper-item" v-for="(item,index) in props.bannerList" :key="item.id">
        <image @click="toDetailPage(item.advertUrl)" :src="item.imageUrl" mode=""></image>
      </swiper-item>
    </swiper>

  </view>
</template>

<script setup lang="ts">
  import {
    getCurrentInstance,
    ref,
    onBeforeMount,
    reactive,
    toRefs,
    watch
  } from "vue";
  // 图片播放索引
  let current = ref(0)
  // 容器背景色
  let bannerBackground = ref('')
  const {proxy} = getCurrentInstance()
  // 图片切换触发事件
  const swiperChange = (e) => {
    current.value = e.detail.current
    bannerBackground.value = props.bannerList[current.value].background
  }
  // 图片点击跳转到详情页事件
  const toDetailPage = (advertUrl) => {
    proxy.navTo(advertUrl)
  }
  // 监听首次加载背景的渲染颜色
  watch(()=>props.bannerList,(newValue) =>{
    if(newValue && newValue.length > 0){
      current.value = 0
      bannerBackground.value = props.bannerList[0] && props.bannerList[0].background
    }
  },{immediate:true})
  // 父组件传递的数据
  const props = defineProps({
    bannerList:{
      type:Array,
      default:() => [
        
      ]
    }
  })
</script>

<style lang="scss" scoped>
  .banner-box{
    padding-top: 120rpx;
    /* #ifdef APP-PLUS */ 
    padding-top: calc(var(--status-bar-height) + 120rpx);
    /* #endif */ 
    .banner-bg{
      position: absolute;
      top: 0;
      width: 100%;
      height: 470rpx;
      /* #ifdef APP-PLUS */ 
      height: calc(var(--status-bar-height) + 470rpx);
       /* #endif */ 
      transform: .5s;
    }
    .banner-swiper{
      width: 100%;
      height: 350rpx;
      .swiper-item{
        width: 100%;
        height: 100%;
        padding: 0 30rpx;
        image{
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }
      }
    }
  }
</style>
